<script>

import TaBar from "./Tabar.vue";
import Navbar from "./Navbar.vue";
// import Center from "./Center.vue";
// import List from "./List.vue";
// import Home from "./Home.vue";
import store from "./store.js";
import {defineAsyncComponent} from "vue";
import LoadingComponent from "./LoadingComponent.vue";
import ErrorComponent from "./ErrorComponent.vue";

const obj = {
  "首页": "Home",
  "列表": "List",
  "我的": "Center",
};
export default {
  components: {
    TaBar, Navbar,
    Home : defineAsyncComponent(()=>import('./Home.vue')),
    List : defineAsyncComponent(()=>import('./List.vue')),
    Center : defineAsyncComponent({
      loader:()=>import('./Center.vue'),
      //加载异步组件时使用的组件
      loadingComponent:LoadingComponent,
      delay:200,
      //加载失败显示的组件
      errorComponent:ErrorComponent,
      //3秒为加载完显示err组件
      timeout:3000,
    })
  },

  data() {
    return {
      which: "Home"
    }
  }
  , mounted() {
    store.subscribe((value) => {
      this.which = obj[value]
    })
  }
}
</script>

<template>
  <div>
    <navbar/>
    <keep-alive>
      <component :is="which"></component>
    </keep-alive>
    <ta-bar/>
  </div>
</template>

<style scoped>

</style>